<template>
    <div>
        <h1>修改</h1>
        <table class="table">
            <tbody>
                <tr>
                    <td>房间名称</td>
                    <td>
                        <input type="text" v-model="data.Name">
                    </td>
                </tr>

                <tr>
                    <td>门市价格</td>
                    <td>
                        <input type="text" v-model="data.Price">
                    </td>
                </tr>

                <tr>
                    <td>房间号</td>
                    <td>
                        <span v-for="d in fh">
                            <input type="checkbox" v-model="fhs" :value="d">{{ d }}
                        </span>
                    </td>
                </tr>

                <tr>
                    <td>状态</td>
                    <td>
                        <input type="radio" v-model="data.State" name="state" :value="true">启用
                        <input type="radio" v-model="data.State" name="state" :value="false">禁用
                    </td>
                </tr>

                <tr>
                    <td></td>
                    <td>
                      <input type="button" value="修改" @click="UptFX()">
                      <input type="button" value="返回" @click="Getupt()">
                    </td>
                </tr>

                
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';

//循环
const data=ref({
      "Id": 0,
      "Name": "",
      "Price": 0,
      "FJnum": 0,
      "State": true,
      "FJstring": "",
      "IsDek": true
})

//多选框
const fh=ref(["101","102","103","104","105","106","107","108","109"]);
const fhs=ref([]);

//钩子
onMounted(() => {
    FT();
})

//反填
var toue=useRoute();
var touer=useRouter();
var ids=toue.query.id;
const FT=()=>{
    axios.get("https://localhost:7249/api/Fx/FTfx",{params:{id:ids}}).then(res=>{
        data.value=res.data;
        fhs.value=data.value.FJstring.split(",");
    })
}

//修改
const UptFX=()=>{
    if(data.value.Name==""){
        alert("名称不能为空");
        return;
    }

    if(isNaN(data.value.Price) || data.value.Price==0){
        alert("房间价格只能是数字");
        return;
    }
    data.value.FJnum=fhs.value.length;//房号数量赋值
    data.value.FJstring=fhs.value.toString();
    if(data.value.FJnum ==0){
        alert("房间号最少勾选一个");
        return;
    }

    axios.put("https://localhost:7249/api/Fx/UptFX",data.value).then(res=>{
        if(res.data>0){
            alert("修改成功");
            touer.push({path:"/"});
        }else{
            alert("修改失败");
            return;
        }
    })

}

//返回
const Getupt=()=>{
    touer.push({path:"/"})
}
</script>

<style scoped>

</style>